<template>
  <div class="rule-body">
    <div class="attend-header">
      <p class="attend-header-title mb10">考勤类型</p>
      <div class="rule-box-line">
        <el-radio-group v-model="attendanceType">
          <el-row :gutter="10">
            <el-col :span="24" class="mb10">
              <el-radio :label="1">
                <p class="attend-radio-p-title">固定班制 (固定时间上下班)</p>
                <p class="attend-radio-p-small">考勤组中所有人按照相同的时间打卡，适用于办公室坐班，例如朝九晚五</p>
              </el-radio>
            </el-col>
            <el-col :span="24">
              <el-radio :label="2">
                <p class="attend-radio-p-title">排班制 (按排班上下班)</p>
                <p class="attend-radio-p-small">自定义设置每人的班次，适用于工厂、门店等，例如三班倒</p>
              </el-radio>
            </el-col>
          </el-row>
        </el-radio-group>
      </div>
    </div>
    <template v-if="attendanceType==1">
      <div class="attend-setting mt20">
        <p class="attend-setting-title mb10">工作日设置</p>
        <p class="attend-setting-small">
        <span class="attend-setting-title-span"
              v-if="allClassesData">快捷设置班次：班次 {{
            allClassesData.name
          }}：{{
            `${allClassesData.comeTime1}-${allClassesData.outNext1 ? '次日' : ''}${allClassesData.outTime1} ${allClassesData.comeTime2 && allClassesData.comeNext2 ? '次日' : ''}${allClassesData.comeTime2 || ''}${allClassesData.comeTime2 ? '-' : ''}${allClassesData.outTime2 && allClassesData.outNext2 ? '次日' : ''}${allClassesData.outTime2 || ''}`
          }}</span>
          <span class="attend-setting-title-span" v-else></span>
          <el-button type="text" @click="handleUpdate('all')">更改班次</el-button>
        </p>
      </div>
      <el-table
        v-loading="loading"
        :data="weekList"
        ref="multipleTable"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="工作日" prop="contacts" width="60">
          <template slot-scope="scope">
            周{{ weekName[scope.row.day] }}
          </template>
        </el-table-column>
        <el-table-column label="规则内容" prop="contacts">
          <template slot-scope="scope">
            <div v-if="ruleListData[scope.row.day]">
              班次
              {{
                ruleListData[scope.row.day].name
              }}：{{
                `${ruleListData[scope.row.day].comeTime1}-${ruleListData[scope.row.day].outNext1 ? '次日' : ''}${ruleListData[scope.row.day].outTime1} ${ruleListData[scope.row.day].comeTime2 && ruleListData[scope.row.day].comeNext2 ? '次日' : ''}${ruleListData[scope.row.day].comeTime2 || ''}${ruleListData[scope.row.day].comeTime2 ? '-' : ''}${ruleListData[scope.row.day].outTime2 && ruleListData[scope.row.day].outNext2 ? '次日' : ''}${ruleListData[scope.row.day].outTime2 || ''}`
              }}
            </div>
            <div v-else>
              休息
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="65"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.$index, scope.row)"
              v-hasPermi="['system:post:edit']"
            >更改班次
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>
    <!--    班次设置-->
    <chooseClasses :visible.sync="listVisible" :param="param" @classesCheck="classesCheck" type="allIn"></chooseClasses>
  </div>
</template>

<script>
import {listOvertimeRules} from '@/api/system/rulesOverTime.js'
import chooseClasses from "@/components/classes/chooseClasses";

export default {
  props: ['ruleTime', 'config'],
  name: "rule-table",
  components: {chooseClasses},
  data() {
    return {
      showConfig: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined
      },
      total: 0,
      ruleList: [],
      loading: false,
      ruleCheckId: 0,
      attendanceType: 1,
      ids: [],
      weekList: [],
      weekName: ['一', '二', '三', '四', '五', '六', '日'],
      listVisible: false,
      param: null,
      classesType: 0,
      allClassesData: null,
      ruleListData: {}
    }
  },
  mounted() {
    for (let i = 0; i < 7; i++) {
      this.weekList.push({
        day: i,
        classesData: null
      })
    }
    if (this.config) {
      if(this.config.attendanceType == 1){
        for (let i in this.config.content) {
          this.$refs.multipleTable.toggleRowSelection(this.weekList[i], true)
        }
      }
      this.attendanceType = this.config.attendanceType
      this.ruleListData = this.config.content
    }
  },
  methods: {
    getList() {
      listOvertimeRules(this.queryParams).then(res => {
        this.ruleList = res.rows
        this.total = res.total
      })
    },
    // 班次编辑
    handleUpdate(index, row) {
      // this.$emit('ruleEdit', row ? this.$deepCopy(row) : null)
      this.classesType = index
      this.listVisible = true
    },
    getCheckFn() {
      if (!this.ruleCheckId) {
        this.$message.error('选择加班规则');
        return
      }
      let row = {}
      for (let item of this.ruleList) {
        if (item.id === this.ruleCheckId) {
          row = this.$deepCopy(item)
        }
      }
      this.$emit('checkRuleGet', row)
    },
    handleSelectionChange(selection) {
      let that = this
      this.ids = selection.map(item => item.day)
      for (let item of that.weekList) {
        if (this.ids.indexOf(item.day) !== -1) {
          if (!this.ruleListData[item.day]) {
            // this.ruleListData[item.day] = this.$deepCopy(this.allClassesData)
            this.$set(this.ruleListData, item.day, this.$deepCopy(this.allClassesData))
          }
        } else {
          if (this.ruleListData[item.day]) {
            delete this.ruleListData[item.day]
          }
        }
      }
    },
    classesCheck(row) {
      if (this.classesType == 'all') {
        if (this.ids.length) {
          for (let item of this.ids) {
            this.ruleListData[item] = row
          }
        }
        this.allClassesData = row
      } else {
        // this.ruleListData[this.classesType] = row
        if (this.ids.indexOf(this.classesType) == -1) {
          this.$refs.multipleTable.toggleRowSelection(this.weekList[this.classesType], true)
        }
        this.$set(this.ruleListData, this.classesType, row)

      }
    },
    submit() {
      if (this.attendanceType == 1) {
        if (JSON.stringify(this.ruleListData) == '{}') {
          this.$message.error('工作日设置');
          return
        }
        for (let i in this.ruleListData) {
          if (!this.ruleListData[i]) {
            this.$message.error('选择工作日班次');
            return
          }
        }
      }
      this.$emit('checkRuleGet', {
        type: 'attendanceTime',
        data: {
          attendanceType: this.attendanceType,
          content: this.ruleListData
        }
      })
    }
  }
}
</script>

<style scoped>
.rule-body .rule-box-line p {
  margin: 0 0 5px;
}

.rule-body .el-radio {
  display: flex;
}

.attend-radio-p-title {
  font-size: 14px;
  color: #171a1d;
  font-weight: normal;
}

.attend-radio-p-small {
  font-size: 14px;
  color: rgba(23, 26, 29, .6);
}

.attend-setting p {
  margin: 0;
}

.attend-setting-small {
  display: flex;
  align-items: center;
}

.attend-setting-title-span {
  font-weight: normal;
  flex: 1;
  font-size: 14px;
}
</style>
